<template>
  <div class="main_left_rotate swiper" v-if="imageList.length > 0">
    <!--div class="main_left_rotater">
      <div class="main_left_rotater1" v-for="(item, index) in imageList" :key="index" :id="'thumb'+index" :data-current="index" @click="onThumbClick" :class="{ 'active': currentIndex == index }">
        <img class="img lazy" style="display: inline" :src="item.file_path" />
        <img class="hide" :class="{ 'active': currentIndex == index }" src="@/assets/images/goodsDetail/1.png"/>
      </div>
    </div-->
    <div class="main_left_rotatel">
      <img class="lazy" :src="imageList[currentIndex].file_path" style="display: block"/>
    </div>
  </div>
  <div class="main_left_rotate swiper" v-else>
    <div class="main_left_rotater" style="background-color: #efefef;">
      <div class="main_left_rotater1" >
        <img class="hide active" src="@/assets/images/goodsDetail/1.png" />
      </div>
    </div>
    <div class="main_left_rotatel" style="width:360px; height:270px; background-color: #efefef;">
      
    </div>
  </div>
</template>
<script>
export default {
  props: {
    circular: {
      type: Boolean,
      default: false,
    },
    height: {
      type: String,
      default: "550",
    },
    imageList: Array,
  },
  data() {
    return {
      currentIndex: 0,
      currentId: "",
    };
  },
  methods: {
    onThumbClick(e) {
      console.info(e)
      let index = e.target.dataset.current || e.currentTarget.dataset.current;
      this.changeView(index);
    },
    swiperChange(e) {
      let index = e.target.current || e.detail.current;
      this.changeView(index);
    },
    changeView(index) {
      this.currentIndex = index;
      let scrollIndex = index - 1 < 0 ? 0 : index - 1;
      this.currentId = "thumb" + scrollIndex;
    },
    // 浏览商品图片
    onPreviewImages(index) {
      let imageUrls = [];
      this.imageList.forEach((item) => {
        imageUrls.push(item.file_path);
      });
      wx.previewImage({
        current: imageUrls[index],
        urls: imageUrls,
      });
    },
  },
};
</script>
<style lang="scss">
/*隐藏滚动条*/
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}
.swiper {
  position: relative;
  padding-bottom: 50rpx;
  background-color: rgb(239, 239, 239);
  border-radius: 8rpx;
}
// 大图
.banner-box {
  height: 700rpx;
}
.slide-image,
.imgBox {
  height: 100%;
  width: 100%;
}
.slide-image {
  background: #fff;
}
// 缩略图
.thumb-banner-box {
  position: absolute;
  bottom: 0;
  right: 94rpx;
  width: 300rpx;
  height: 100rpx;
  flex-direction: row;
  white-space: nowrap;
  .thumb-banner-item {
    display: inline-block;
    flex-wrap: nowrap;
    padding-left: 10rpx;
    padding-right: 10rpx;
    &::after {
      content: "";
      display: block;
      width: 12rpx;
      height: 4rpx;
      margin: 6rpx auto 0;
      transform: skew(-30deg);
      background: transparent;
    }
    &.active::after {
      background: #cb0133;
      animation: 0.2s rightRouceIn ease-in-out;
    }
  }
  .slide-image {
    width: 100rpx;
    height: 80rpx;
    border-radius: 8rpx;
    border: 1px #eee solid;
  }
}
@keyframes rightRouceIn {
  0% {
    transform: translateX(5rpx);
  }
  50% {
    transform: translateX(-5rpx);
  }
  100% {
    transform: translateX(0);
  }
}
/* banner计数 */
.banner-num {
  position: absolute;
  right: 30rpx;
  bottom: 20rpx;
  font-size: 24rpx;
  line-height: 26rpx;
}

.banner-num text:last-child {
  font-size: 24rpx;
}
</style>
